<template>
  <div class="relation-task">
    <el-table 
      :data="relationTaskList"
      stripe
      border
      header-row-class-name="base-table-header-v3"
      row-class-name="base-table-row-v3"
    >
      <el-table-column :label="$t('common.label.taskNo')" width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="text" @click="toTaskView(scope.row.taskId, scope.row.taskNo)">{{scope.row.taskNo}}</el-button>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.label.taskTemplate')" prop="templateName" show-overflow-tooltip></el-table-column>
      <el-table-column :label="$t('common.base.customer')" prop="customerName" show-overflow-tooltip></el-table-column>
      <el-table-column :label="$t('common.base.contact')" prop="linkmanName" show-overflow-tooltip></el-table-column>
      <el-table-column :label="$t('common.base.phone')" prop="contact" show-overflow-tooltip></el-table-column>
      <el-table-column :label="$t('common.base.customerAddress')" prop="address" show-overflow-tooltip></el-table-column>
      <el-table-column :label="$t('order.detailV2.serviceStatus')" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="state" :style="{'background-color': serviceStateMap[scope.row.serviceState].bgColor,'color':serviceStateMap[scope.row.serviceState].color}">{{serviceStateMap[scope.row.serviceState].text}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.base.createTime')" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>{{scope.row.createTime | formatTime}}</div>
        </template>
      </el-table-column>
    </el-table>

    <archive-dialog ref="archiveDialog"></archive-dialog>
  </div>
</template>

<script>
import moment from 'moment'

import archiveDialog from '@src/component/compomentV2/ArchiveDialog';
import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
export default {
  name: 'relation-task',
  props:{
    relationTaskList: {
      type: Array,
      default: ()=> []
    },
  },
  data() {
    return{
      serviceStateMap:{
        1:{
          text:this.$t('order.detailV2.serviceNotStarted'),
          bgColor: '#FF9100',
          color: '#ffffff',
        },
        2:{
          text:this.$t('portal.processing'),
          bgColor: '#0091EA',
          color: '#ffffff',
        },
        3:{
          text:this.$t('order.detailV2.serviceCompleted'),
          bgColor: '#52C41A',
          color: '#ffffff',
        },
        4:{
          text:this.$t('order.detailV2.serviceCanceled'),
          bgColor: '#8c8c8c',
          color: '#ffffff',
        }
      }
    }
  },
  filters: {
      formatTime(time) {
          if (!time) return
          return moment(time).format('YYYY-MM-DD HH:mm:ss')
      }
  },
  methods: {
    toTaskView(taskId, taskNo) {
      let fromId = window.frameElement.getAttribute('id');
      openAccurateTab({
        fromId,
        type:PageRoutesTypeEnum.PageTaskView,
        key:taskId,
      });
    },
  },
  components:{
    [archiveDialog.name]:archiveDialog
  }
}
</script>

<style lang="scss" scoped>
.check-archive{
  color: $color-primary;
  text-align: center;
  margin-bottom: 0;
  cursor: pointer;
  flex-basis: 100%;
  margin-top: 12px;
}
.relation-task {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
  ::v-deep .el-table {
    flex: 1;
    overflow: auto;
  }
}
.state{
    height: 22px;
    padding: 0 10px;
    background: #448AFF;
    border-radius: 11px;
    line-height: 22px;
    text-align: center;
    color: #ffffff;
}
</style>